<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="box">
    姓名：<input type="text" v-model:value="username" />
    <button @click="search">查询</button>
<!--      name="item.name" 传一个item.name的字符串过去，这个没有意义-->
<!--    典型：父组件给子组件传值-->
<!--    单向绑定：值放生改变，界面一起变-->
    <table width="500" rules="all" align="center" style="margin-top: 100px">
            <table-tr v-for="item in list"
                      :id="item.id"
                      :name="item.name"
                      :age="item.age"
                      :email="item.email">

            </table-tr>
    </table>
</div>
<script src="js/vue.2.7.14.js"></script>
<script>

    let TableTr = Vue.extend({
        template:`<tr>
                    <td>{{id}}</td>
                    <td>{{name}}</td>
                    <td>{{age}}</td>
                    <td>{{email}}</td>
                </tr>`,
        props:{
            id:{required:true,type:Number},
            name:{required:true,type:String},
            age:{required:true,type:Number},
            email:{required:true,type:String},
        }
    })

    // 如果是驼峰命名
    Vue.component('table-tr' , TableTr)

    new Vue({
        el:'#box',
        data:{
            list:[],
            temList:[
                    {id:1 , name:'jone' ,   age:18 , email:'123456@qq.com'},
                    {id:2 , name:'tom' ,    age:21 , email:'123456@qq.com'},
                    {id:3 , name:'Salay' ,  age:20 , email:'123456@qq.com'},
            ],
            username:'' // 输入框双向绑定的用户名
        },
        created() {
            this.list = JSON.parse(JSON.stringify(this.temList)); // 数组深度拷贝
        },
        methods:{
            search() {
                // filter是数组的
                let list2 = this.temList.filter((e)=>{
                    return e.name == this.username
                })
                this.list = list2
            }
        }
    });
</script>
</body>
</html>